<template>
  <div class="mid box">
    <div class="buttons">
      <el-button type="primary" size="large" @click="changeFlag(true)"
        >查看员工</el-button
      >
      <el-button type="success" size="large" @click="changeFlag(false)"
        >添加员工</el-button
      >
      <el-button type="primary" size="large" @click="searchFlag"
        >搜索员工</el-button
      >
    </div>
    <div class="search" v-if="data.searchFlag">
      <el-input
        @change="handleSearch"
        v-model="data.search"
        placeholder="请输入员工工号"
        suffix-icon="Search"
        clearable
        size="large"
      />
    </div>
  </div>
  <div class="staff-container box">
    <StaffShow v-if="data.showFlag" />
    <StaffAdd v-if="!data.showFlag" />
  </div>
</template>

<script setup>
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
import StaffShow from '@/views/Staff/StaffShow'
import StaffAdd from '@/views/Staff/StaffAdd'
// 定义数据data

const data = reactive({
  search: '',
  showFlag: true,
  searchFlag: false
})
// 使用store
const store = useStore()
const { dispatch, getters } = store
// 切换查看员工和添加员工的方法
const changeFlag = (show) => {
  data.showFlag = show
}
// 切换搜索框的显示
const searchFlag = () => {
  changeFlag(true)
  data.searchFlag = !data.searchFlag
}
// 搜索的点击事件
const handleSearch = async () => {
  await dispatch('staff/getStaffList', { search: data.search, pagination })
  changeFlag(true)
}
const pagination = computed(() => getters.pagination)
</script>

<style lang="scss" scoped>
.search {
  margin-right: 1rem;

  .el-input {
    display: inline !important;
  }
  :deep(.el-input__inner) {
    width: 24rem;
  }
}

.staff-container {
  height: 30rem;
}
</style>
